<template>
	<div class="content" v-loading="mainLoading">
		<h2><i class="iconfont icon-activity_add"></i>
			<span v-if="$route.query.id">修改供应商</span>
			<span v-else>添加供应商</span>
		</h2>
		<el-form class="content-wrap" :model="params" label-width="130px" inline status-icon :rules="rules" ref="ruleForm" size="mini">
			<div class="ct-list">
				<el-form-item label="供应商名称" prop="supplier_name">
					<el-input v-model="params.supplier_name"></el-input>
				</el-form-item>
				<el-form-item label="单位地址" prop="address">
					<el-input v-model="params.address"></el-input>
				</el-form-item>
				<el-form-item label="联系电话" prop="mobile">
					<el-input v-if="$route.query.id" v-model="params.mobile" disabled="disabled"></el-input>
					<el-input v-else v-model="params.mobile"></el-input>
				</el-form-item>
				<el-form-item v-if="!$route.query.id" label="供应商密码" prop="user_pwd">
					<el-input v-model="params.user_pwd" type="password"></el-input>
				</el-form-item>
				<el-form-item v-if="!$route.query.id" label="重复密码" prop='passwd2'>
					<el-input v-model="params.passwd2" type="password"></el-input>
				</el-form-item>
				<el-form-item label="账户类型" prop='bank_card_type'>
					<el-select v-model="params.bank_card_type" @change=select_bank_card_type>
  						<el-option label="企业" value="企业"></el-option>
						<el-option label="个人" value="个人"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="银行账号" prop="card_no">
					<el-input v-model="params.card_no"></el-input>
				</el-form-item>
				<el-form-item label="银行账户名" prop="bank_card_name">
					<el-input v-model="params.bank_card_name"></el-input>
				</el-form-item>
				<el-form-item label="开户总行" prop="bank">
					<el-input v-model="params.bank"></el-input>
				</el-form-item>
				<el-form-item label="开户支行" prop="bank_name">
					<el-input v-model="params.bank_name"></el-input>
				</el-form-item>
				<el-form-item label="经办人" prop="agent_man">
					<el-input v-model="params.agent_man"></el-input>
				</el-form-item>
				<el-form-item label="经办人电话" prop="agent_man_mobile">
					<el-input v-model="params.agent_man_mobile"></el-input>
				</el-form-item>
				<el-form-item label="邮编" prop="zip_code">
					<el-input v-model="params.zip_code"></el-input>
				</el-form-item>
				<el-form-item label="传真" prop="fax_no">
					<el-input v-model="params.fax_no"></el-input>
				</el-form-item>
			</div>
			<div class="ct-list">
				<div class="ct-list__title">企业统一社会信用代码</div>
				<div class="ct-list__upload">
					<s-upload-pictrue :limit="1" :size="2" :fileList="fileListBusiness" @getImgIds="handleImgUploadCode"></s-upload-pictrue>
				</div>
			</div>
			<div class="ct-list">
				<div class="ct-list__title">企业相关资质</div>
				<div class="ct-list__upload">
					<s-upload-pictrue :limit="10" :size="2" :fileList="fileListContract" @getImgIds="handleImgUploadBusiness"></s-upload-pictrue>
				</div>
			</div>
			<div class="ct-list">
				<div class="ct-list__title">供应商合同</div>
				<div class="ct-list__upload">
					<s-upload-pictrue :limit="20" :size="2" :fileList="fileListCredential" @getImgIds="handleImgUploadContract"></s-upload-pictrue>
				</div>
			</div>
			<div class="ct-list">
				<div class="ct-list__title">仓库基本信息</div>
				<!-------------------------------------->
				<el-form-item label="仓库名" prop="warehouse_name">
					<el-input v-model="params['warehouse_name']"></el-input>
				</el-form-item>
				<!-------------------------------------->
				<el-form-item label="固定电话" prop="warehouse_mobile">
					<el-input v-model="params['warehouse_mobile']"></el-input>
				</el-form-item>
				<!-------------------------------------->
				<el-form-item label="联系人" prop="warehouse_linkman">
					<el-input v-model="params['warehouse_linkman']"></el-input>
				</el-form-item>
				<!-------------------------------------->
				<el-form-item label="移动电话" prop="warehouse_tel">
					<el-input v-model="params['warehouse_tel']"></el-input>
				</el-form-item>
				<!-------------------------------------->
				<el-form-item label="传真" prop="warehouse_fax_no">
					<el-input v-model="params['warehouse_fax_no']"></el-input>
				</el-form-item>
				<!-------------------------------------->
				<el-form-item label="仓库位置">
					<s-get-area @getArea="handleGetArea"></s-get-area>
				</el-form-item>
				<!-------------------------------------->
				<el-form-item label="仓库详细地址" prop="warehouse_address">
					<el-input v-model="params['warehouse_address']"></el-input>
				</el-form-item>
			</div>
			<!--提交活动-->
			<div class="submit">
				<el-button type="primary" @click="addSupplier" size="mini">确认提交</el-button>
			</div>
		</el-form>
	</div>
</template>

<script>
	import uploadPicture from "../../components/upload_picture/upload_picture.vue"
	import getArea from "../../components/cascader/province_cascader.vue"
	export default {
		created() {
			if(this.$route.query.id) {
				this.loadData();
			}
			
		},
		components: {
			"s-upload-pictrue": uploadPicture,
			"s-get-area": getArea
		},
		data() {
			/*密码校验规则*/
			var validatePwd = (rule, value, cb) => {
				if (value.length < 6) {
					cb("密码长度至少为6位")
				}else {
					if (this.params.passwd2 != "") {
						this.$refs["ruleForm"].validateField("passwd2");
					}
					cb();
				}
			};
			var validatePwd2 = (rule, value, cb) => {
				if (value !== this.params.user_pwd) {
					cb("两次输入密码不一致")
				}else {
					cb();
				}
			};
			/*手机号码校验*/
			var validatePhone = (rule, value, cb) => {
				if (value === "") {
					cb("请输入手机号码");
				}else {
					cb();
				}
			}
			
			
			return {
				params: {
					"supplier_name": "",
					"business_img_ids": "",
					"contract_img_ids": "",
					"credential_img_ids": "",
					"address": "",
					"zip_code": "",
					"fax_no": "",
					"mobile": "",
					"bank": "",
					"bank_name": "",
					"agent_man": "",
					"agent_man_mobile": "",
					"link_man": "",
					"user_pwd": "",
					"passwd2": "",
					"card_no": "",
					"bank_card_name": "",
					"bank_card_type": "",
					"warehouse_area_id": [],
					"warehouse_name": "",
					"warehouse_address": "",
					"warehouse_mobile": "",
					"warehouse_linkman": "",
					"warehouse_tel": "",
					"warehouse_fax_no": ""
				},
				fileListBusiness: [],
				fileListCredential: [],
				fileListContract: [],
				//========其他参数========//
				loading: true, //加载小圆圈触发变量
				mainLoading: false, //提交活动以后的小圆圈
				//=======表单验证========//
				rules: {
					user_pwd: [{
						required: true, 
						message: "请输入密码"
					},{
						validator: validatePwd, trigger: 'blur'
					}],
					passwd2: [{
						required: true, 
						message: "请再次输入密码"
					},{
						validator: validatePwd2, trigger: 'blur'
					}],
					supplier_name: [{
						required: true,
						message: '请输入供货商名称',
						trigger: 'blur'
					}],
					address: [{
//						required: true,
						message: '请输入活动名称',
						trigger: 'blur'
					}, ],
					zip_code: [{
//						required: true,
						message: '请输入单位地址',
						trigger: 'blur'
					}, ],
					fax_no: [{
//						required: true,
						message: '请输入传真',
						trigger: 'blur'
					}, ],
					mobile: [{
						required: true,
						message: '请输入联系电话',
						trigger: 'blur'
					}, {
						validator: validatePhone,
						trigger: "blur"
					}],
					bank_name: [{
//						required: true,
						message: '请输入开户行名称',
						trigger: 'blur'
					}, ],
					agent_man: [{
//						required: true,
						message: '请输入经办人',
						trigger: 'blur'
					}, ],
					agent_man_mobile: [{
//						required: true,
						message: '请输入经办人电话',
						trigger: 'blur'
//					}, {
//						validator: validatePhone,
//						trigger: "blur"
					}],
					card_no: [{
//						required: true,
						message: '请输入银行账户',
						trigger: 'blur'
					}, ],
					"warehouse_name": [{
//						required: true,
						message: '请输入仓库名称',
						trigger: 'blur'
					}, ],
					"warehouse_address": [{
//						required: true,
						message: '请输入仓库详细地址',
						trigger: 'blur'
					}, ],
					"warehouse_mobile": [{
//						required: true,
						message: '请输入固定电话',
						trigger: 'blur'
//					}, {
//						validator: validatePhone,
//						trigger: "blur"
					} ],
					"warehouse_linkman": [{
//						required: true,
						message: '请输入联系人',
						trigger: 'blur'
					}, ],
					"warehouse_tel": [{
//						required: true,
						message: '请输入移动电话',
						trigger: 'blur'
//					}, {
//						validator: validatePhone,
//						trigger: "blur"
					} ],
					"warehouse_fax_no": [{
//						required: true,
						message: '请输入传真',
						trigger: 'blur'
					}, ],
					warehouse_location: [{
//						required: true,
						message: "请选择位置"
					}]
				}
			};
		},

		methods: {
			select_bank_card_type(val) {
				this.params.bank_card_type = val;
			},
			loadData() {
				var url = `${this.url}/supplier/supplier_get_info.action`;
				var params = {
					supplier_id: this.$route.query.id
				};
				this.mainLoading = true;
				this.$http.get(url, { params }).then((res) => {
					this.mainLoading = false;
					this.params = res.data.result;
					if(this.params.bankCard) {
						this.params.card_no = this.params.bankCard.card_no;
						this.params.bank = this.params.bankCard.bank;
						this.params.bank_card_name = this.params.bankCard.bank_card_name;
						this.params.bank_card_type = this.params.bankCard.bank_card_type;
						this.params.bank_name = this.params.bankCard.bank_name;
						this.params.agent_man = this.params.bankCard.link_man;
						this.params.agent_man_mobile = this.params.bankCard.mobile;
					}
					if(this.params.warehouse) {
						this.params.warehouse_name = this.params.warehouse.warehouse_name;
						this.params.warehouse_tel = this.params.warehouse.tel;
						this.params.warehouse_mobile = this.params.warehouse.mobile;
						this.params.warehouse_linkman = this.params.warehouse.linkman;
						this.params.warehouse_fax_no = this.params.warehouse.fax_no;
						this.params.warehouse_address = this.params.warehouse.address;
//						"warehouse_area_id": [],
					}
					var $this = this;
					// 营业执照
					$this.params.business_img_ids = '';
					if(this.params.business_imgs) {
						this.params.business_imgs.forEach(function(r) {
							if($this.params.business_img_ids)
								$this.params.business_img_ids += ",";
							$this.params.business_img_ids += r.image_resource_id;
							$this.fileListBusiness.push({
								name: '',
								url: r.thump + "400"
							});
						});
					}
					// 企业资质
					$this.params.credential_img_ids = '';
					if(this.params.credential_imgs) {
						this.params.credential_imgs.forEach(function(r) {
							if($this.params.credential_img_ids)
								$this.params.credential_img_ids += ",";
							$this.params.credential_img_ids += r.image_resource_id;
							$this.fileListCredential.push({
								name: '',
								url: r.thump + "400"
							});
						});
					}
					// 合同
					$this.params.contract_img_ids = '';
					if(this.params.contract_imgs) {
						this.params.contract_imgs.forEach(function(r) {
							if($this.params.contract_img_ids)
								$this.params.contract_img_ids += ",";
							$this.params.contract_img_ids += r.image_resource_id;
							$this.fileListContract.push({
								name: '',
								url: r.thump + "400"
							});
						});
					}
					this.area_old = '';
					if(this.params.area) {
						if(this.params.area[2]) {
							this.area_old += this.params.area[2].area_name;
							this.area_old += ' '
							this.area_old += this.params.area[1].area_name;
							this.area_old += ' '
							this.area_old += this.params.area[0].area_name;
						}
					}
				});
			},
			//选择地区
			handleGetArea(val) {
				this.params['warehouse_area_id'] = val;
			},
			//企业社会信用代码
			handleImgUploadCode(ids) {
				this.params.business_img_ids = ids;
			},
			//企业资质图片上传处理函数
			handleImgUploadBusiness(ids) {
				this.params.credential_img_ids = ids;
			},
			//供应商合同图片上传处理函数
			handleImgUploadContract(ids) {
				this.params.contract_img_ids = ids;
			},
			//添加供应商
			addSupplier() {
				//改变传给服务器后台参数的值
				var params = {};
				params["supplier_name"] = this.params["supplier_name"];
				params["business_img_ids"] = this.params["business_img_ids"];
				params["contract_img_ids"] = this.params["contract_img_ids"];
				params["credential_img_ids"] = this.params["credential_img_ids"];
				params["address"] = this.params["address"];
				params["zip_code"] = this.params["zip_code"];
				params["fax_no"] = this.params["fax_no"];
				params["mobile"] = this.params["mobile"];
				params["bank"] = this.params["bank"];
				params["bank_name"] = this.params["bank_name"];
				params["bank_card_name"] = this.params["bank_card_name"];
				params["bank_card_type"] = this.params["bank_card_type"];
				params["agent_man"] = this.params["agent_man"];
				params["agent_man_mobile"] = this.params["agent_man_mobile"];
				params["user_pwd"] = this.params["user_pwd"];
				params["card_no"] = this.params["card_no"];
				params["warehouse.warehouse_name"] = this.params["warehouse_name"];
				params["warehouse.address"] = this.params["warehouse_address"];
				params["warehouse.fax_no"] = this.params["warehouse_fax_no"];
				params["warehouse.linkman"] = this.params["warehouse_linkman"];
				params["warehouse.mobile"] = this.params["warehouse_mobile"];
				params["warehouse.area.area_id"] = this.params["warehouse_area_id"];
				params["warehouse.tel"] = this.params["warehouse_tel"];
				params["warehouse.zip_code"] = this.params["zip_code"];
				
				if(true) {
					// 跳过图片验证代码
				} else if (!this.params["business_img_ids"]) {
					this.$message({
						type: "warning",
						message: "请上传社会统一信用代码"
					});
					return;
				}else if (!this.params["contract_img_ids"]) {
					this.$message({
						type: "warning",
						message: "请上传供应商合同"
					});
					return;
				}else if (!this.params["credential_img_ids"]) {
					this.$message({
						type: "warning",
						message: "请上传供应商资质"
					});
					return;
				}
				
				this.$refs["ruleForm"].validate((valid) => {
					if (valid) {
						var url;
						if(this.$route.query.id) {
							url = `${this.url}/supplier/supplier_edit.action`;
							params.supplier_id = this.$route.query.id;
						} else {
							url = `${this.url}/supplier/supplier_add.action`;
						}
						this.mainLoading = true;
						this.$http.get(url, { params }).then((res) => {
							this.mainLoading = false;				
							if( res.data.success ) {
								var $this = this;
								this.$message({
									type: "success",
									message: "提交成功",
									onClose: function() {
										$this.$router.push({path: '/admin/supplier_list'});
									}
								});
							}else {
								this.$message({
									type: "error",
									message: res.data.result.errmsg
								});
							}
						});
					}
				});

			}
		}
	}
</script>

<style lang="scss" scoped>
	/*每一项的基本信息填写*/
	
	.ct-list__title {
		color: #008489;
		font-size: 18px;
		margin: 1rem 0;
	}
	
	.ct-list__field {
		display: inline-flex;
		margin-left: 25px;
		margin-bottom: 10px;
		align-items: center;
		width: 26%;
	}
	
	.ct-list__upload {
		margin-left: 25px;
	}
	
	.ct-list__field--title {
		text-align: right;
		min-width: 8rem;
		margin-right: 15px;
		flex-shrink: 0;
		font-size: 14px;
		color: #666;
	}
	/*提交按钮*/
	
	.submit {
		text-align: center;
		margin-top: 4rem;
	}
</style>